import type { BaiduElements } from '../../../../../../../../types/constants'
import type { ThemeType } from '../../../../../../../../types/interfaces'
import { ThemeVarService } from '../../../../../../../../lib/abstract/style/theme_var/service'
import {
  AppStyleCollections,
  BUTTON_STYLES,
  PAGE_ELEMENTS,
  SUPPORTED_PLATFORMS,
} from '../../../../../../../../types/constants'
import { StylesService } from '../../../../../../../../types/constants/styles'
import { SYMBOLS } from '../../../../../../../../types/interfaces'

export class BaiduAdvancedPage {
  elements: BaiduElements = PAGE_ELEMENTS[SUPPORTED_PLATFORMS.BAI_DU]
  private static instance: BaiduAdvancedPage
  private themeVarService: ThemeVarService = ThemeVarService.getInstance()
  private stylesService: StylesService = StylesService.getInstance()

  /**
   * 获取单例实例
   */
  public static getInstance(): BaiduAdvancedPage {
    if (!BaiduAdvancedPage.instance) {
      BaiduAdvancedPage.instance = new BaiduAdvancedPage()
    }
    return BaiduAdvancedPage.instance
  }

  init(): void {
    // 添加搜索按钮
    const $button = $(`
      <button class="btn ${BUTTON_STYLES.primary.className} bd-search-btn">
        <span class="bd-icon-search"></span> 百度一下
      </button>
    `)

    // 插入到表单中
    $('body > form:has(table)').append($button)

    // 绑定点击事件
    $button.on('click', (_e) => {
      document.querySelector('form')?.submit()
    })
  }

  getMainStyles(_theme: ThemeType): string {
    return `
  margin-top: 0 !important;
  
  /* 有壁纸时背景颜色置为透明 */
  &.${AppStyleCollections.Wallpaper.EXISTS} > :is(#lg, form, #ft) {
    background: transparent !important;
  }
  &.${AppStyleCollections.Wallpaper.EXISTS} #t1 {
    background-color: transparent !important;
  }

  > :is(#lg, form, #ft) {
    background: transparent !important;
  }
  
  > #lg {
    padding-top: 16px !important;
    float: none !important;
    display: none !important;
  }
  
  > #tl {
    background-color: transparent !important;
    color: var(${this.themeVarService.search.default.textPrimary}) !important;
    font-size: 18px !important;
    height: auto !important;
    padding: 16px 0 0 10px !important;
    top: 0 !important;
    margin: 0 !important;
    
    /* 移除浮动布局的位置属性 */
    & + div[style*="clear:both"], & + div[style*="clear: both"] {
      clear: none !important;
    }
    
    a {
      color: var(${this.themeVarService.search.default.text}) !important;
      text-decoration: none !important;
      
      &:hover {
        color: var(${this.themeVarService.link.default.text}) !important;
      }
    }
  }
  
  > form {
    margin: 0 auto !important;
    width: fit-content !important;

    table {
      color: var(${this.themeVarService.search.default.text}) !important;
      width: auto !important;
      
      input:not([type="submit"]) {
        ${this.stylesService.input.default}
      }
      
      select {
        ${this.stylesService.select.default}
      }
      
      /* 隐藏提交按钮 */
      input[type="submit"] {
        display: none !important;
      }
      
      td {
        font-size: 14px !important;
      }
    }
    
    #t1 {
      background-color: transparent !important;
    }
    
    .btn.btn-primary.bd-search-btn {
      margin-left: 10px !important;
      
      .bd-icon-search {
        margin-right: 6px;
        font-size: 14px;

        &::before {
          content: '${SYMBOLS.UI.SEARCH_MINIMAL}';
          font-size: 19px;
          line-height: 1;
        }
      }
    }
  }
  
  > br {
    display: none !important;
  }
  
  > #ft {
    padding-top: 40px !important;
    color: var(${this.themeVarService.search.default.text}) !important;
  }
`
  }
}
